/**
 * @Author: easten
 * @Created: 2024-04-16 00:32:54
 * @Description:
 *
 */
/**
 * @Author: easten
 * @Created: 2024-04-15 23:29:48
 * @Description:
 *
 */
import classnames from "classnames";
import React, { useState, useEffect } from "react";
import { RefreshIcon, SearchIcon } from "tdesign-icons-react";
import {
  Button,
  Input,
  Popconfirm,
  Space,
  Table,
  message,
} from "tdesign-react";
import RoleDrawer from "./RoleDrawer";
import PermissionDrawer from "./PermissionDrawer";
import { ModuleCommonProps, PageParams } from "_common/DataType";
import { SysRole } from "_common/entity";
import { ApiRole } from "_common/api/sys";
import { TableTitle } from "components";
const SysRoleComp: React.FC<ModuleCommonProps> = (props) => {
  const { axios, className } = props;
  const [selectedRowKeys, setSelectedRowKeys] = useState<(string | number)[]>([
    1, 2,
  ]);
  const [loading, setLoading] = useState<boolean>(false);
  const [RoleList, setRoleList] = useState<SysRole[]>([]);
  const [selectedRow, setSelectedRow] = useState<SysRole>();
  const [RoleName, setRoleName] = useState<string>();
  const [pageState, setPageState] = useState<PageParams>({
    pageNum: 1,
    pageSize: 10,
    total: 0,
  });

  // const { loading, contractList, current, pageSize, total } = pageState;
  const [visible, setVisible] = useState(false);
  const [edit, setEdit] = useState(false);

  // 授权抽屉状态
  const [permissionVisible, setPermissionVisible] = useState(false);

  const apiRole = new ApiRole(axios);

  function onSelectChange(value: (string | number)[]) {
    setSelectedRowKeys(value);
  }

  useEffect(() => {
    getRoleList();
  }, [RoleName]);

  const getRoleList = async () => {
    setLoading(true);
    const response = await apiRole.getPageList({
      ...pageState,
      RoleName,
    });
    if (response && response.code == 200 && response.data) {
      setRoleList(response.data.list);
      setPageState({
        ...pageState,
        total: response.data.total,
        list: response.data.list,
      });
      setLoading(false);
    }
    setLoading(false);
  };

  // 删除用户
  const deleteRole = async (id: number) => {
    const response = await apiRole.deleteRole(id);
    if (response && response.code === 200) {
      message.success("删除成功");
      getRoleList();
    }
  };

  return (
    <div className={classnames(className)}>
      <div className="flex flex-row justify-between mb-4">
        <TableTitle text="角色列表" />
        <Space size={5}>
          <Input
            suffixIcon={<SearchIcon />}
            placeholder="请输入要搜索的角色名称"
            onChange={(v) => {
              setRoleName(v);
            }}
          />
          <Button
            onClick={() => {
              setVisible(true);
              setEdit(false);
            }}
          >
            添加角色
          </Button>
          <Button
            icon={<RefreshIcon />}
            variant="outline"
            onClick={() => {
              getRoleList();
            }}
          ></Button>
        </Space>
      </div>

      <Table<SysRole>
        bordered
        columns={[
          {
            align: "left",
            width: 100,
            ellipsis: true,
            colKey: "index",
            title: "序号",
            cell: ({ rowIndex }) => {
              let _index =
                (pageState.pageNum - 1) * pageState.pageSize + rowIndex + 1;
              return <span>{_index}</span>;
            },
          },
          {
            align: "left",
            ellipsis: true,
            colKey: "name",
            title: "角色名称",
          },
          {
            align: "left",
            ellipsis: true,
            colKey: "code",
            title: "角色编码",
          },

          {
            align: "left",
            ellipsis: true,
            colKey: "sortCode",
            title: "排序",
          },
          {
            align: "left",
            ellipsis: true,
            colKey: "createTime",
            title: "创建时间",
            cell({ row }) {
              return <span>{row.createTime ?? "-"}</span>;
            },
          },
          {
            align: "center",
            fixed: "right",
            width: 220,
            colKey: "op",
            title: "操作",
            cell({ row }) {
              return (
                <Space size={0}>
                  <Button
                    theme="success"
                    variant="text"
                    onClick={() => {
                      setVisible(true);
                      setEdit(true);
                      setSelectedRow(row);
                    }}
                  >
                    编辑
                  </Button>
                  <Button
                    theme="success"
                    variant="text"
                    onClick={() => {
                      setPermissionVisible(true);
                      setSelectedRow(row);
                    }}
                  >
                    授权
                  </Button>
                  <Popconfirm
                    content="确认删除吗"
                    destroyOnClose
                    placement="top"
                    showArrow
                    theme="danger"
                    onConfirm={() => deleteRole(row.id)}
                  >
                    <Button theme="danger" variant="text">
                      删除
                    </Button>
                  </Popconfirm>
                </Space>
              );
            },
          },
        ]}
        loading={loading}
        data={RoleList}
        rowKey="index"
        selectedRowKeys={selectedRowKeys}
        verticalAlign="middle"
        hover
        onSelectChange={onSelectChange}
        pagination={{
          pageSize: pageState.pageSize,
          total: pageState.total,
          current: pageState.pageNum,
          showJumper: true,
          onCurrentChange(current) {
            setPageState({
              ...pageState,
              pageNum: current,
            });
          },
          onPageSizeChange(size) {
            setPageState({
              ...pageState,
              pageSize: size,
            });
          },
        }}
      />
      <RoleDrawer
        axios={axios}
        open={visible}
        edit={edit}
        value={selectedRow}
        onSuccess={() => {
          setVisible(false);
          getRoleList();
        }}
      />
      <PermissionDrawer
        axios={axios}
        value={selectedRow}
        open={permissionVisible}
        onClose={setPermissionVisible}
      />
    </div>
  );
};
export default SysRoleComp;
